<template>
  <div class="hello" v-loading="loading">
    <!-- <div class="out-content"> -->
    <el-card class="box-card">
      <h1>群消息发布平台</h1>
      <div class="img-content">
        <img
          alt="Logo"
          src="https://s1.ax1x.com/2020/05/19/YIw3l9.jpg"
          style="height: 25px"
        />
        <h2 class="yinghuo-school">萤火校园i</h2>
      </div>
    </el-card>
    <!-- </div> -->

    <!-- <h3></h3> -->
    <!-- <和></和> -->
    <p style="color: #6a6f77;" class="text-insert">
      填写发布信息,审核后发到校园所有大群
    </p>
    <!-- <form> -->
    <el-input
      class="input"
      placeholder="学校简称"
      @input="change($event)"
      v-model="message.schoolId"
    ></el-input
    ><br />
    <!-- <el-input
      class="input"
      @input="change($event)"
      placeholder="话题"
      v-model="message.title"
    ></el-input> -->
    <el-select
      class="input"
      v-model="message.title"
      placeholder="请选择话题分类"
    >
      <el-option
        v-for="item in topic"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <br />
    <el-input
      class="input"
      @input="change($event)"
      type="textarea"
      placeholder="消息内容"
      :autosize="{ minRows: 2, maxRows: 4 }"
      v-model="message.content"
    ></el-input>
    <br />
    <div class="isAnonymous ">
      <div class="title-text">匿名:</div>
      <el-switch class="el-switch" v-model="isAnonymous" active-color="#13ce66">
      </el-switch>
    </div>

    <br />
    <br />
    <!-- :http-request="uploadSectionFile" 
    limit="1"-->
    <el-upload
      action="123"
      class="avatar-uploader"
      :http-request="uploadSectionFile"
      :auto-upload="true"
      list-type="picture"
      :limit="limit"
      :file-list="fileList"
      :on-remove="handleRemove"
      :on-exceed="outLimit"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-progress
      class="input"
      v-if="showProgress"
      :percentage="progress"
      :color="customColorMethod"
    ></el-progress>
    <br />
    <div class="bottom">
      <!-- <button v-if="showButton" value="确定发布" class="login" @click="release">
        <span>确定发布</span>
      </button> -->
      <el-button class="confirm-release" @click="release" type="success"
        >确定发布</el-button
      >
      <!-- <el-button type="primary" @click="toAudio">发语音</el-button> -->
    </div>
    <!-- </form> -->
    <br /><br />
    <p style="color: #6a6f77; margin-bottom: -10px;">
      目前已支持多所高校一键发送消息到所属学校的所有大群,想做自己学校负责人的同学,点击添加QQ:<a
        target="_blank"
        href="http://tool.gljlw.com/qq/?qq=986140000"
      >
        <img
          border="0"
          src="http://wpa.qq.com/pa?p=2:9861440000:41"
          alt="点击这里给我发消息"
      /></a>
    </p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isApple: false,
      limit: 3,
      message: {
        schoolId: "",
        title: "",
        content: "",
        pic: "",
        userId: "",
        anonymous: false,
      },
      isAnonymous: false,
      progress: 0,
      topic: [
        {
          value: "失物招领",
          label: "失物招领",
        },
        {
          value: "闲置物品",
          label: "闲置物品",
        },
        {
          value: "我要求助",
          label: "我要求助",
        },
        {
          value: "表白交友",
          label: "表白交友",
        },
        {
          value: "游戏开黑",
          label: "游戏开黑",
        },
        {
          value: "即时吐槽",
          label: "即时吐槽",
        },
        {
          value: "广告推广",
          label: "广告推广",
        },
        {
          value: "回复消息",
          label: "回复消息",
        },
        {
          value: "社团活动",
          label: "社团活动",
        },
      ],
      fileMsgAndUrl: [], //图片UID和url
      fileUrlList: [], // 路径url
      fileList: [], //文件列表
      showProgress: false,
      showButton: true,
      dialogImageUrl: "",
      //版本
      version: "",
      loading: false,
    };
  },
  created() {
    // this.message.userId = decodeURIComponent(location.search)
    //   .split("&")[0]
    //   .split("=")[1]; //获取url中"?"符后的字串);
    this.message.userId = this.$route.query.userId;
    let ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (ios) {
      this.isApple = true;
      this.$notify({
        title: "提示",
        message:
          "检测到您为IOS设备:\n由于QQ内置浏览器的缺陷,ios用户若要上传图片请点击右上角在Safari浏览器打开此链接",
        duration: 0,
      });
    }
    console.log(this.message.userId);
  },
  methods: {
    //跳转到语音界面
    toAudio() {
      let user_id = this.message.userId; //获取url中"?"符后的字串);
      this.$router.push({ name: "radio", query: { userId: user_id } });
    },
    change(e) {
      this.$forceUpdate();
    },
    release() {
      if (this.message.schoolId == null || this.message.schoolId == "") {
        this.$notify.error({
          title: "错误",
          message: "请输入学校简称",
        });
        return;
      }
      if (this.message.title == null || this.message.title == "") {
        this.$notify.error({
          title: "错误",
          message: "请选择消息标题",
        });
        return;
      }
      if (this.message.content == null || this.message.content == "") {
        this.$notify.error({
          title: "错误",
          message: "请输入消息内容",
        });
        return;
      }
      this.$notify({
        title: "成功",
        message: "正在提交,请稍后~",
        type: "success",
      });
      this.message.anonymous = this.isAnonymous;

      this.message.pic = this.fileUrlList.join();
      console.log(this.message.pic);
      this.loading = true;
      try {
        this.$http({
          method: "post",
          // url: "http://39.100.144.69:20118/campus",
          url: "http://39.101.142.204:8090/campus",
          // url: "http://39.101.142.204:20118/campus",
          data: this.message,
        }).then((res) => {
          console.log(res);
          res = res.data;
          this.loading = false;
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: "发布成功!请等待管理员审核",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.msg,
            });
          }
        });
      } catch (error) {
        this.$notify.error({
          title: "错误",
          message: "网络错误!请稍后再试",
        });
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    //上传图片
    uploadSectionFile(param) {
      this.progress = 0;
      this.showProgress = true;
      this.$notify({
        title: "",
        message: "正在上传图片,请稍后~若长时间未上传成功,请重新上传",
        type: "success",
      });
      this.showButton = false;
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      form.append("file ", fileObj);
      let _this = this;
      this.$http({
        method: "post",
        // url: "https://v1.alapi.cn/api/image",
        url: "http://39.101.142.204:8090/pic/upload",
        data: form,
        onUploadProgress(progressEvent) {
          let val = (
            (progressEvent.loaded / progressEvent.total) *
            100
          ).toFixed(0);
          _this.progress = parseInt(val);
        },
      }).then((res) => {
        // console.log(res);
        console.log(res.data.data[0])
        let image = res.data.data[0];
        // this.message.pic = image;

        // console.log(_this.fileUrlList);
        // if (res.data.code === 200) {
          let url = {
            uid: fileObj.uid,
            url: image,
          };
          _this.fileUrlList.push(image);
          _this.fileMsgAndUrl.push(url);
          _this.progress = 100;
          _this.$notify({
            title: "成功",
            message: "图片上传成功",
            type: "success",
          });
          _this.showProgress = false;
        // } else {
        //   // 上传失败
        //   _this.$notify.error({
        //     title: "错误",
        //     message: "上传失败",
        //   });
        // }
        _this.showButton = true;
      });
    },
    //文件数量超出限制
    outLimit() {
      this.$notify.error({
        title: "错误",
        message: "只能上传三张图片",
      });
    },
    handleRemove(val) {
      this.fileMsgAndUrl = this.fileMsgAndUrl.filter(
        (item) => item.uid !== val.uid
      );
      // console.log(val);
      this.fileUrlList = this.fileMsgAndUrl.map((item) => item.url);
      // console.log(this.fileUrlList);
      // this.message.pic = "";
      this.progress = 0;
      this.showProgress = false;
    },
    //进度条改颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    //限定文件大小
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
.bottom {
  display: flex;
  .confirm-release {
    width: 80vw;
  }
}
.isAnonymous {
  display: flex;
  height: 5vh;
  width: 90vw;
  margin: 0 auto;
  border-radius: 4px;
  font-weight: 400;
  margin-top: 4vh;
  border: 1px solid rgb(220, 223, 230);
  .el-switch {
    display: grid;
    height: 5vh;
    // border: 1px solid red;
    justify-items: center;
    align-items: center;
    margin-left: 53vw;
  }
  .title-text {
    display: grid;
    height: 5vh;
    margin-left: 2vw;
    font-family: "宋体";
    font-size: 1.1em;
    justify-items: center;
    align-items: center;
    letter-spacing: 0.5em;
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-content {
  display: flex;
  align-items: center;
  justify-items: center;
  float: right;
}
.yinghuo-school {
  font-size: 1em;
  font-weight: normal;
}
.out-content {
  display: grid;
  width: 100%;
  text-align: center;
  justify-items: center;
  align-items: center;
  /* border: 1px red solid; */
  /* float: right; */
}
h3 {
  margin-top: 8vh;
}
ul {
  list-style-type: none;
  padding: 0;
}
.text-insert {
  text-align: center;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
li {
  list-style: none;
  background: url("../assets/li.png") no-repeat 0 0;
  /* text-indent: 0.5em; */
}
.input {
  font-size: 0.8em;
  height: 2.5em;
  width: 90vw;
  margin: 0 auto;
  border-radius: 4px;
  /* border: 1px solid #c8cccf; */
  color: #6a6f77;
  -web-kit-appearance: none;
  -moz-appearance: none;
  display: block;
  outline: 0;
  text-decoration: none;
  text-align: center;
}
input[type="text"] {
  font-size: 0.8em;
  height: 2.5em;
  width: 25vw;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid #c8cccf;
  color: #6a6f77;
  -web-kit-appearance: none;
  -moz-appearance: none;
  display: block;
  outline: 0;
  text-decoration: none;
  text-align: center;
}
input[type="text"]:focus {
  border: 1px solid #42b983;
}
.login {
  /* display: inline-block; */
  border-radius: 4px;
  background-color: #42b983;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  padding: 7px;
  width: 90vw;
  /* transition: all 0.5s; */
  cursor: pointer;
  margin: -5px;
}
.login span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.login span:after {
  content: "»";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.login:hover span {
  padding-right: 25px;
}
.login:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
